Walkthrough

This pull request introduces message pagination with client-side loading, updates chat timestamps on message creation, refactors the backend chat query to use a single combined query with ordering by latest activity, reorganizes chat list UI layouts, and adds supporting Firestore indexes for efficient chat queries.

Changes

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Frontend as Frontend<br/>(+page.svelte)
    participant Backend as Backend<br/>(ChatService)
    participant DB as Database

    User->>Frontend: Load messages (page 1)
    Frontend->>Backend: getUserChats(userId, page)
    Backend->>DB: Query chats with<br/>joins, grouping,<br/>ordering by latest msg
    DB-->>Backend: Return paginated<br/>chats + total count
    Backend->>Backend: Load full relations<br/>Sort by latest<br/>message timestamp
    Backend->>Backend: Augment with<br/>isRead flag per chat
    Backend-->>Frontend: Return chats +<br/>pagination metadata
    Frontend->>Frontend: Store pagination state<br/>(currentPage, totalPages)
    Frontend-->>User: Display chats +<br/>pagination controls

    User->>Frontend: Click Next page
    Frontend->>Backend: getUserChats(userId, page 2, append=true)
    Backend-->>Frontend: Return next batch
    Frontend->>Frontend: Append to messages
    Frontend-->>User: Update UI with<br/>combined chats

sequenceDiagram
    participant User
    participant Frontend as Frontend<br/>(MessageService)
    participant ChatSvc as ChatService
    participant DB as Database

    User->>Frontend: Send message
    Frontend->>Frontend: Create Message record
    Frontend->>DB: Save Message
    DB-->>Frontend: Message saved
    Frontend->>ChatSvc: Update chat.updatedAt
    ChatSvc->>DB: Fetch Chat by ID
    DB-->>ChatSvc: Chat record
    ChatSvc->>ChatSvc: Set updatedAt<br/>to current time
    ChatSvc->>DB: Save Chat
    DB-->>ChatSvc: Chat updated
    ChatSvc-->>Frontend: Complete
    Frontend-->>User: Message sent

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

The changes span multiple domains (database configuration, backend services, frontend components, and pagination UI) with varying complexity. The backend ChatService refactoring introduces a new query pattern with explicit sorting logic, while frontend changes include state management and pagination controls. Layout adjustments are straightforward, but the heterogeneous nature of changes across services and components requires careful review of integration points and data flow consistency.

Possibly related PRs

• feat: blabsy active chat indcator #320 — Both PRs modify chat-list.tsx layout and styling; this PR restructures layout/button placement while the retrieved PR adjusts selected/hover styling.
• fix: fixed blabsy chat overflow. #285 — Both PRs adjust chat.tsx container sizing (height and spacing classes) to address overflow and vertical stacking behavior.

Suggested reviewers

• sosweetham

Poem

🐰 Hops through chats, newest first,
Pagination quenches our sorting thirst,
Messages stamp the time they're sent,
Timestamps flow, and queries bent,
Layouts bloom, full-width and bright! ✨

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}